<template>
  <!-- 百人场-飞机详情 -->
  <el-dialog :modelValue="props.show" custom-class="detailData" :title="GameName(indexStore.gameArray, props.checkedItem.game_id)+$t('46')" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails">
    <div class="border-box" v-loading="data.loading">
      <template v-for="(item, index) in data.filArr" :key="index">
        <div class="flex list" v-if="index <= 7">
          <div class="width20"> {{ item.label }} </div>
          <span v-if="item.key=='game_id'">
            <div class="gameIcon marginB5">
              <div class="flex marginR5">
                <el-tag size="small">{{ GamePlatform(indexStore.gameArray, props.checkedItem.game_id) }}</el-tag>
                <img class="game-icon" :src="selectToLabel(GAMEICON, props.checkedItem.game_id)" alt="">
              </div>
              {{ selectToLabel(indexStore.gameArray, props.checkedItem.game_id) }}
            </div>
          </span>
          <span v-else-if="item.key == 'win'" :class="colorClass(item.value)">
            {{ item.value }}</span>
          <span v-else>{{ item.value }}</span>
        </div>
      </template>
      <div class="fily">
        <template v-for="(item, index) in data.filArr.filter((item, index) => index > 7)" :key="index">
          <div class="flight" v-if="item.key == 'flight_multiplier'">
            <div class="list">
              <div class="width20">
                {{ item.label }}
              </div>
              <div class="">
                <span>{{ item.value }}</span>
              </div>
            </div>
          </div>
          <div class="fily-list list" v-else>
            <div class="width50">
              {{ item.label }}
            </div>
            <div class="">
              <span>{{ item.value }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { getGameDetailsLog } from '@/api/user'
import { setTimestampTime } from '@/utils/time'
import { BigWan } from '@/utils/math'
import { GAMEICON } from '@/config/eunm'
import { selectToLabel,GameName,colorClass,GamePlatform } from '@/utils/index'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const props = defineProps({
  checkedItem: Object as any, // 当前条数的数据 
  show: Boolean, // 是否显示
})

interface FilArr {
  label: string,
  value: any,
  key: string
}

const data = reactive({
  filArr: [] as FilArr[],
  loading: false,
})

watch(
  () => [props.checkedItem,props.show],
  async (value) => {
    if (value[0] && value[1]) { 
      gameDetails()
    }
  },
)

const gameDetails = async() => {
  try {
    data.loading = true
    let res = await getGameDetailsLog({
      log_details_id: props.checkedItem.log_details_id,
      game_id: props.checkedItem.game_id
    })
    data.loading = false
    let obj = res.data
    indexStore.setPageLoading(false)
    data.filArr = [
      { label: t('36'), value: GameName(indexStore.gameArray, props.checkedItem?.game_id), key: 'game_id' },
      { label: t('40'), value: props.checkedItem.round_id_str, key: 'round_id_str' },
      { label: t('39'), value: setTimestampTime(props.checkedItem.save_time_stamp), key: 'created_time_stamp' },
      { label: t('357'), value: BigWan(obj.total_bet), key: 'total_bet' },
      { label: t('358'), value: obj.join_count, key: 'join_count' },
      { label: t('348'), value: BigWan(props.checkedItem.bet), key: 'bet' },
      { label: t('354'), value: BigWan(props.checkedItem.win - props.checkedItem.bet), key: 'win' },
      { label: t('359'), value: BigWan(obj.flight_multiplier), key: 'flight_multiplier' },
      { label: t('360'), value: BigWan(obj.left_bet), key: 'left_bet' },
      { label: t('365'), value: BigWan(obj.right_bet), key: 'right_bet' },
      { label: t('361'), value: BigWan(obj.left_delta), key: 'left_delta' },
      { label: t('366'), value: BigWan(obj.right_delta), key: 'right_delta' },
      { label: t('362'), value: BigWan(obj.left_click_multiplier), key: 'left_click_multiplier' },
      { label: t('367'), value: BigWan(obj.right_click_multiplier), key: 'right_click_multiplier' },
      { label: t('363'), value: obj.left_auto_cash_out > 0 ? t('355') : t('356'), key: 'left_auto_cash_out' },
      { label: t('368'), value: obj.right_auto_cash_out > 0 ? t('355') : t('356'), key: 'right_auto_cash_out' },
      { label: t('364'), value: BigWan(obj.left_auto_cash_out), key: 'left_auto_cash_out' },
      { label: t('364'), value: BigWan(obj.right_auto_cash_out), key: 'right_auto_cash_out' },
    ]
  } catch (error) {
    data.loading = false
  }
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>
<style scoped lang="scss">
.border-box {
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--text);
}

.fily {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .fily-list {
    width: 50%;
  }
}

.flight {
  width: 100%;
}

.list {
  font-weight: bold;
  height: 36px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
</style>